<!-- 学社 - 学社主页 - 成员组件 -->
<template>
  <view class="px-4">
    <!-- 成员二级tab栏 -->
    <view class="flex mx-auto w-344 mt-4 mb-1 h-48 bg-#f6f6f6 rounded-md border-12">
      <view v-for="(item, index) in memberTabList" :key="index"
        :class="[state.memberTabCurrent == index ? 'tab-active' : '']" class="flex-1 leading-6 text-center c-#999 text-28"
        @click="onmemberQaTabChange(index)">
        {{ item.label }}
      </view>
    </view>
    <view v-if="state.memberTabCurrent == 0">
      <view v-if="state.list.length == 0" class="flex flex-col items-center justify-center">
        <image class="w-228 h-228 mt-8" src="/static/images/empty/img_empty.png" />
        <view class="text-28 c-#666 mt-2">暂无审核</view>
      </view>
      <view v-for="(item, index) in state.list" :key="index" class="flex items-center py-2">
        <u-image width="60" height="60" border-radius="60"
          :src="item.user?.avatar ?? '/static/images/user/ic_def_avatar.png'" class="mr-4 flex-shrink-0"
          @click="toHomePage(item.user_id)" />
        <view class="flex-1 c-#333 text-28 text-single font-bold" @click="toHomePage(item.user_id)">{{ item.user?.nickname
        }}</view>
        <view class="flex-shrink-0 btn-audit" @click="onAudit(item)">审核</view>
      </view>
    </view>
    <view v-if="state.memberTabCurrent == 1">
      <view v-if="state.management.length == 0" class="flex flex-col items-center justify-center">
        <image class="w-228 h-228 mt-8" src="/static/images/empty/img_empty.png" />
        <view class="text-28 c-#666 mt-2">暂无审核</view>
      </view>
      <template v-if="state.management.length > 0">
        <!--社长管理员-->
        <view class="c-#999 text-28 mb-1">
          社长、管理员({{ state.management && state.management.length }}人)
        </view>
        <member-item v-for="(item, index) in state.management" :key="index"  :data="item" :is-creator="true" :show-operate="showOperate"
          @operate="onOperate" />
      </template>
      <template v-if="state.counselor.length > 0">
        <!--顾问-->
        <view class="c-#999 text-28 my-1">
          顾问({{ state.counselor && state.counselor.length }}人)
        </view>
        <member-item v-for="(item, index) in state.counselor" :key="index" :data="item" :is-creator="true" :show-operate="showOperate"
          @operate="onOperate"/>
      </template>
      <template v-if="state.member.length > 0">
        <!--成员-->
        <view class="c-#999 text-28 my-1">
          成员({{ state.member && state.member.length }}人)
        </view>
        <member-item v-for="(item, index) in state.member" :key="index" :data="item" :is-creator="true" :show-operate="showOperate"
          @operate="onOperate" />
      </template>
    </view>
  </view>
  <!-- 操作弹窗 -->
  <u-modal v-model="state.showOperateModal" :show-title="false" border-radius="12" :show-cancel-button="false"
    :show-confirm-button="false">
    <view class="slot-content">
      <view @click="state.showOperateModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
        <image class="mt-3  mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
      </view>
      <view class="flex items-center justify-center py-2">
        <view class="flex flex-col justify-center items-center w-116">
          <view class="relative">
            <view class="w-116 h-116 rounded-full border-avatar">
              <u-image shape="circle" width="100%" height="100%"
                :src="state.oprateCurrentMember?.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"/>
            </view>
            <view v-if="state.oprateCurrentMember?.member_position > 0" class="label-style tag-identity"
              :class="`label-style${state.oprateCurrentMember?.member_position}`">{{ identity }}</view>
          </view>
          <view class="c-#666 text-28 mt-2  text-center w-full text-single">{{
            state.oprateCurrentMember?.user?.nickname ?? '-' }}</view>
        </view>
      </view>
      <view class="flex justify-between items-center pt-3 u-border-top">
        <view class="flex flex-col items-center">
          <view class="c-#666 text-28">{{ state.oprateCurrentMember?.join_day }}天</view>
          <view class="mt-1 c-#999 text-24">加入天数</view>
        </view>
        <view class="flex flex-col items-center">
          <view class="c-#666 text-28">{{ state.oprateCurrentMember?.dynamic_number }}条</view>
          <view class="mt-1 c-#999 text-24">动态</view>
        </view>
        <view class="flex flex-col items-center">
          <view class="c-#666 text-28">{{ state.oprateCurrentMember?.like_num }}次</view>
          <view class="mt-1 c-#999 text-24">获得赞同</view>
        </view>
      </view>
      <view class="px-4 py-1 mt-4 mb-5 bg-#F6F6F6">
        <view v-if="state.oprateCurrentMember?.name" class="c-#333 my-2 text-28 w-full text-single">姓名：{{
          state.oprateCurrentMember?.name }}</view>
        <view v-if="state.oprateCurrentMember?.wechat_code" class="c-#333 text-28 my-2 w-full text-single">微信号：{{
          state.oprateCurrentMember?.wechat_code }}</view>
        <view v-if="state.oprateCurrentMember?.company_name" class="c-#333 text-28 my-2 w-full text-single">公司名称：{{
          state.oprateCurrentMember?.company_name }}</view>
        <view v-if="state.oprateCurrentMember?.createtime" class="c-#333 text-28 my-2 w-full text-single">加入时间：{{
          dateFormat(state.oprateCurrentMember?.createtime, 'YYYY-MM-DD') }}</view>
      </view>
      <view class="flex items-center justify-center">
        <!-- 顾问不能设为管理员 -->
        <view class="btn btn-remove" @click="onRemove(state.oprateCurrentMember.id)">移出该成员</view>
        <view v-if="state.oprateCurrentMember?.member_position != 1" class="btn btn-manage ml-5"
          @click="onManage(state.oprateCurrentMember.id, state.oprateCurrentMember?.member_position)">
          {{ state.oprateCurrentMember?.member_position == 2 ? '取消管理员' : '设为管理员' }}
        </view>
      </view>
    </view>
  </u-modal>
  <!-- 审核弹窗 -->
  <u-modal v-model="state.showAuditModal" :show-title="false" border-radius="12" :show-cancel-button="false"
    :show-confirm-button="false">
    <view class="slot-content">
      <view @click="state.showAuditModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
        <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
      </view>

      <view class="flex items-center py-2">
        <u-image width="60" height="60" border-radius="60" :src="state.auditCurrentMember?.user?.avatar" class="mr-4" />
        <view class="flex-1 c-#333 text-28 text-single font-bold mr-2">{{ state.auditCurrentMember?.user?.nickname }}
        </view>
      </view>
      <view class="c-#333 text-28 my-5 w-full text-single">姓名：{{ state.auditCurrentMember?.name }}</view>
      <view class="c-#333 text-28 my-5 w-full text-single">微信号：{{ state.auditCurrentMember?.wechat_code }}</view>
      <view class="c-#333 text-28 mb-5 w-full text-single">公司名称：{{ state.auditCurrentMember?.company_name }}</view>

      <view class="c-#333 text-28 mb-8">备注：{{ state.auditCurrentMember?.remark }}</view>
      <view class="flex items-center justify-center">
        <view class="btn btn-remove" @click="onAuditHandle(2)">拒绝</view>
        <view class="btn btn-manage ml-5" @click="onAuditHandle(1)">通过</view>
      </view>
    </view>
  </u-modal>
</template>
<script setup>
import { dateFormat } from '@/common/util/date'
import { societyIdentity } from '@/common/constant/society.js'
import { showToast } from '@/common/util/uni'
import { toHomePage } from "@/common/util/util";
import memberItem from '@/package_society/components/member/member-item.vue';
import { getMemberAuditLists, getMemberLists, postMemberAudit, postMemberDel, postMemberSetAdministrator, postMemberCancelAdministrator, getMemberModalDetail } from '@/common/http/module/society.js'

const emit = defineEmits(['refresh'])
const props = defineProps({
  club_id: [String, Number],
  member_position: [String, Number],  // 用户在该学社身份
})
const state = reactive({
  list: [], // 成员列表
  management: [], // 社长、管理员列表
  counselor: [], // 顾问列表
  member: [], // 成员列表
  showAuditModal: false,
  auditCurrentMember: '', // 当前审核人员信息
  oprateCurrentMember: '', // 当前操作人员信息,
  showOperateModal: false,
  memberTabCurrent: 1
})
const memberTabList = [
  {
    label: '待审核',
    value: 0
  },
  {
    label: '已审核',
    value: 1
  }
]

// 社长显示成员编辑按钮
const showOperate = computed(() => props.member_position == 3)
// 学社身份中文名
const identity = computed(() =>state.oprateCurrentMember?.is_management?'客户经理': societyIdentity.find(v => v.value == state.oprateCurrentMember?.member_position)?.label)

// 点击审核
function onAudit(item) {
  state.auditCurrentMember = item
  state.showAuditModal = true
}

// 审核
function onAuditHandle(type) {
  postMemberAudit({
    member_id: state.auditCurrentMember?.id,
    status: type
  }).then(() => {
    showToast(`${type ? '已通过' : '已拒绝'}`)
    state.showAuditModal = false
    loadData()
    emit('refresh')
  })
}

async function onOperate(member) {
  const { data } = await getMemberModalDetail(member.id, member.club_id)
  console.log('onOperate', data);
  state.oprateCurrentMember = data
  state.showOperateModal = true
}



// 移出
function onRemove(id) {
  postMemberDel({ member_id: id }).then(() => {
    showToast('移出成功')
    state.showOperateModal = false
    state.memberNum > 0 ? state.memberNum-- : 0
    loadData()
  })
}

// 设为管理员
function onManage(id, member_position) {
  const postMethod = member_position == 2 ? postMemberCancelAdministrator : postMemberSetAdministrator
  postMethod({ member_id: id }).then(() => {
    showToast(`${member_position == 2 ? '取消管理员成功' : '设为管理员成功'}`)
    state.showOperateModal = false
    loadData()
  })
}

// 成员tab切换
function onmemberQaTabChange(i) {
  state.memberTabCurrent = i
  loadData()
}

function loadData() {
  const postMethod = state.memberTabCurrent ? getMemberLists : getMemberAuditLists
  postMethod(props.club_id).then(res => {
    console.log('成员列表', res.data);
    if (!state.memberTabCurrent) {
      state.list = res.data
    } else {
      const { management, counselor, member } = res.data
      state.management = management
      state.counselor = counselor
      state.member = member
    }
  })
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.border-avatar {
  border: 6rpx solid #F4AF22;
}

.tag-identity {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 104rpx;
  padding: 2rpx 16rpx;
  color: #FFFFFF;
  font-size: 20rpx;
}
.label-style {
  padding: 2rpx 10rpx;
  color: #fff;
  font-size: 20rpx;
  margin-right: 16rpx;
  border-radius: 6rpx;

  &3 {
    background-color: #F4AF22;
  }

  &2 {

    background-color: #6FC9E7;
  }

  &1 {
    background-color: #F8DC61;
  }
}
.btn-audit {
  color: #fff;
  width: 104rpx;
  height: 48rpx;
  line-height: 48rpx;
  text-align: center;
  border-radius: 12rpx;
  background: linear-gradient(-180deg, rgba(244, 174, 32, 1) 0%, rgba(248, 220, 97, 1) 100%);
}

.tab-active {
  background: linear-gradient(-76.14deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  border: 1px solid #FFFFFF;
  border-radius: 12rpx;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.3);
  color: #fff;
  font-weight: bold;
}


.slot-content {
  position: relative;
  padding: 40rpx;
}

.btn {
  width: 260rpx;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  border-radius: 10rpx;
  font-size: 14px;
}

.btn-remove {
  border: 2rpx solid #F4AF22;
  color: #F4AF22;
}

.btn-manage {
  background-color: #F4AF22;
  color: #fff;
}

.tab-active {
  background: linear-gradient(-76.14deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  border: 1px solid #FFFFFF;
  border-radius: 12rpx;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.3);
  color: #fff;
  font-weight: bold;
}</style>
